import React, { Component } from 'react';
// 修改state 数据的两种方式的区别
// react 为了做性能优化, 如果修改数据以对象的形式修改, 最后会将修改操作合并,
// 最后一个对象的key 覆盖前面对象的相同key属性
// 而当修改操作时函数的形式的时候, 他也合并, 会将三个函数放在一个数组中, 然后三个函数会循环执行,
// 所以增加3次
export default class Mycls1 extends Component {
    state = {
        num: 99
    }
    // 以对象形式修改
    addNumFn1 = () => {
        this.setState({
            num: this.state.num + 1,
        })
        this.setState({
            num: this.state.num + 1
        })
        this.setState({
            num: this.state.num + 1
        })
    }
    // 以函数形式修改
    addNumFn2 = () => {
        this.setState((state) => {
            return {
                num: state.num + 1
            }
        })
        this.setState((state) => {
            return {
                num: state.num + 1
            }
        })
        this.setState((state) => {
            return {
                num: state.num + 1
            }
        })
    }
    render() {
        return (
            <div>
                <p>num:{this.state.num}</p>
                <p>
                    <button onClick={this.addNumFn1}>使用对象形式修改state</button>
                    <button onClick={this.addNumFn2}>使用函数形式修改state</button>
                </p>
            </div>
        )
    }
}
